<!--
 * @Author: your name
 * @Date: 2020-02-25 13:32:39
 * @LastEditTime: 2020-03-25 15:02:45
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \福路德扫码系统\html\cksm.html
 -->
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0,viewport-fit=cover" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../css/vant.css">
    <link rel="stylesheet" type="text/css" href="../css/base.css" />
    <link rel="stylesheet" type="text/css" href="../css/local.css" />
    <script type="text/javascript" src="../script/jquery.js"></script>
    <script type="text/javascript" src="../script/layer/mobile/layer.js"></script>
    <script type="text/javascript" src="../script/vue.min.js"></script>
    <script type="text/javascript" src="../script/vant.min.js"></script>
    <script type="text/javascript" src="../script/fastclick.js"></script>
    <script type="text/javascript" src="../script/base.js"></script>
    <style type="text/css">
        .m .van-cell {
            padding: 5px 16px;
        }

        .success {
            color: #07c160;
            font-size: 12px;
        }

        .danger {
            color: #cd1b21;
            font-size: 12px;
        }

        .gray {
            color: #9e9e9e;
        }

        .e {
            padding: 30px 15px;
            text-align: center;
        }

        .n {
            font-weight: 700;
            padding-bottom: 20px;
            font-size: 20px;
        }

        .s {
            font-size: 13px;
            color: #9e9e9e;
            padding-bottom: 10px;
        }

        .n-e {
            padding-bottom: 20px;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="init-full" v-cloak>
            <van-nav-bar class="head" title="订货箱码查询" left-arrow @click-left="onClickLeft">
            </van-nav-bar>
            <div class="body-with-bottom">

                <div class="content">
                    <div class="flex-box flex-direction-c">
                        <div>
                            <div style="border-bottom:1px solid #ebedf0" @click="openScan">
                                <van-field label="箱码" v-model="xm" placeholder="请扫描箱码" readonly></van-field>
                            </div>

                            <div style="padding: 10px 0;">
                                <van-row type="flex" justify="space-around">
                                    <van-col span="10">
                                        <van-button type="primary" block size="small" @click="openScan">
                                            <van-icon name="scan" style="vertical-align: middle;"></van-icon>
                                            <span style="vertical-align: middle;">扫描箱码</span>
                                        </van-button>
                                    </van-col>
                                </van-row>
                            </div>

                            <van-cell-group class="m" v-if="mainData.length">
                                <van-cell title="日期" :value="mainData[0].BillDate"></van-cell>
                                <van-cell title="单据号" :value="mainData[0].BillNo"></van-cell>
                                <van-cell title="客户" :value="mainData[0].ClientName"></van-cell>
                                <van-cell title="箱码" :value="mainData[0].StockName"></van-cell>
                            </van-cell-group>
                        </div>
                        <div class="flex-main o-y-a" v-if="detailData.length">
                            <div class="table">
                                <table>
                                    <tr>
                                        <th>箱码</th>
                                        <th>商品</th>
                                        <th>需求数</th>
                                        <th>装箱数</th>
                                        <th>缺货数</th>
                                    </tr>
                                    <tr v-for="(row,index) in detailData">
                                        <td>{{row.BoxCode}}</td>
                                        <td>{{row.ProductName}}</td>
                                        <td>{{row.BNum}}</td>
                                        <td>{{row.FNum}}</td>
                                        <td>{{row.QNum}}</td>
                                    </tr>

                                </table>
                            </div>

                        </div>
                    </div>
                </div>
            </div>

        </div>




    </div>
</body>
<script type="text/javascript">
    var vm;
    apiready = function () {

        var userInfo = FLD.getUserInfo();

        var FNScanner = api.require('FNScanner');


        vm = new Vue({
            el: '#app',
            data: {
                showLoading: false,
                xm: '',
                mainData: [],
                detailData: []
            },
            created: function () {
                var that = this;

            },
            methods: {
                openScan() {
                    var that = this;
                    FNScanner.open({
                        autorotation: true
                    }, function (ret, err) {
                        if (ret) {
                            var code = ret.content;
                            if (code.indexOf('BR') > -1) {
                                that.xm = code;
                                FLD.ajax('APP_DHXMCXNZ', { S_BoxCode: code }, function (res) {
                                    if (res.ds) {
                                        that.mainData = res.ds;
                                        that.detailData = res.ds1;
                                    } else {
                                        that.mainData = [];
                                        that.detailData = [];
                                        layer.open({
                                            content: '未查询到相关信息',
                                            skin: 'msg',
                                            time: 2
                                        });
                                    }
                                })
                            } else {
                                layer.open({
                                    content: '二维码错误',
                                    skin: 'msg',
                                    time: 2
                                });
                            }
                        } else {
                            layer.open({
                                content: '扫描失败!',
                                skin: 'msg',
                                time: 2
                            });

                        }
                    });
                },
                onClickLeft() {
                    api.closeWin();
                }
            }
        })
    };
</script>

</html>